<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: none;
			}
			body, html {
				width: 100%;
				height: 100%;
				background: black;
				overflow: hidden;
			}
			
			.fire {
				width: 3px;
				height: 30px;
				background: white;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.spark {
				width: 3px;
				height: 3px;
				position: absolute;
			}
			
		</style>
		
		<script src="move.js"></script>
		<script>
			//鼠标在页面上点击某处
			document.onclick = function(evt) {
				var oEvent = evt || event;
				var x = oEvent.clientX;
				var y = oEvent.clientY;
				
				//创建烟花,并发射
				fireStartLaunch(x, y);
			}
			
			//创建烟花,并发射
			function fireStartLaunch(x, y) {
				
				//创建烟花
				var fireNode = document.createEleent("div");
				fireNode.className = "fire";
				//位置
				fireNode.style.left = x + "px";
				fireNode.style.top = document.documentElement.clientHeight - 30 + "px";
				//添加到body上
				document.body.appendChild(fireNode);
				
				//发射
				startMove(fireNode, {top:y, height:3}, function(){
					
					//先把烟花移除
					document.body.removeChild(fireNode); 
					
					//爆炸
					var count = parseInt(Math.random() * 30) + 30; 
					for (var i=0; i<count; i++) {
						sparkStartBoom(x, y);
					}
				});
			}
			
			//爆炸, 创建烟花星火
			function sparkStartBoom(x, y) {
				//创建烟花星火
				var sparkNode = document.createElement("div");
				sparkNode.className = "spark";
				sparkNode.style.background = randomColor(); //随机颜色
				//位置
				sparkNode.style.left = x + "px";
				sparkNode.style.top = y + "px";
				//添加到body上
				document.body.appendChild(sparkNode);
				
				//开始做抛物线运动
				var xSpeed = parseInt(Math.random()*20) * (Math.random()>0.5 ? 1 : -1);
				var ySpeed = parseInt(Math.random()*20) * (Math.random()>0.5 ? 1 : -1);
				
				//启动定时器, 开始抛物线运动
				var timer = setInterval(function(){
					ySpeed++;
					sparkNode.style.left = sparkNode.offsetLeft + xSpeed + "px";
					sparkNode.style.top = sparkNode.offsetTop + ySpeed + "px";
					
					//判断, 如果超出了浏览器的显示区域, 则删除该节点,并关闭定时器
					if (sparkNode.offsetLeft < 0 || sparkNode.offsetLeft > document.documentElement.clientWidth 
						|| sparkNode.offsetTop > document.documentElement.clientHeight) {
							document.body.removeChild(sparkNode); //移除该spark节点
							clearInterval(timer); //关闭定时器
						}
					
				}, 30);
				
			}
			
			function randomColor(){
				return "rgb(" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ")";
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>
